<template>
  <component
    :is="isExternalLink ? 'a' : 'router-link'"
    :to="isExternalLink ? undefined : href"
    :href="isExternalLink ? href : undefined"
    class="nav-link inline-block rounded-lg px-2 py-1 text-sm text-slate-700"
  >
    <slot></slot>
  </component>
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  const props = defineProps<{
    href: string
  }>()

  const isExternalLink = computed(() => props.href.startsWith('http') || props.href.startsWith('#'))
</script>

<style scoped>
  .nav-link {
    transition: all 0.2s;
  }

  .nav-link:hover {
    background-color: rgb(241 245 249); /* slate-100 */
    color: rgb(15 23 42); /* slate-900 */
  }
</style>
